<template>
    <div class="container">
        <div class="head">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane
                    v-for="item in imgcateBox"
                    :key="item.categoryId"
                    :label="item.name"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="body">
            <div v-for="item in imgBox" class="box" :key="item.photoId" lazy>
                <img :src="item.link" class="mouse_hover" style="width: 389px; height: 100%;" @click="_toPhotoDetail(item.photoId)"/>
                <div class="hide">
                    <div class="h-content">
                        <h5>{{ item.title }}</h5>
                        <div class="h-title">
                            <!-- 头像 -->
                            <!-- 当你给一个vue组件绑定事件的时候，要加上native -->
                            <el-avatar  @click.native="_toDetail(item.userId)" class="mouse_hover" :src="item.userAvatar"></el-avatar>
                            <h3 class="nickname">{{ item.nick }}</h3>
                            <div @click="proxyImage(item.photoId)">
                                <slot name="approve">
                                    <img
                                        src="../assets/fonts/点赞白.png"
                                        class="el-icon-approve mouse_hover"
                                        id="approve"
                                        slot="approve"
                                    />
                                </slot>
                            </div>
                            <i class="el-icon-chat-square mouse_hover"  id="commentIcon" @click="_toPhotoDetail(item.photoId)"></i>
                            <h4 class="approvalNum">
                                {{ item.approvalCounts }}
                            </h4>
                            <h4 class="commentNum mouse_hover"  @click="_toPhotoDetail(item.photoId)">{{ item.commentCounts }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片详情 -->
        <!-- dialogVisible：true:打开/false:关闭 -->
        <!-- photoId：传入图片id -->
        <!--  @close="photoDetailVisible = false" 必须否则有警告（el-dialog的警告）  -->
        <photo-detail
            :dialogVisible="photoDetailVisible"
            :photoId="photoId"
            @close="photoDetailVisible = false"
        />
    </div>
</template>

<script>
import imageApi from '../request/imageApi';
import PhotoDetail from '../component/PhotoDetail.vue';
export default {
    components: {PhotoDetail},
    data() {
        return {
            loading: false,
            count: 12,
            activeName: 'all',
            imgcateBox: [],
            imgBox: [],
            CateImgBox: [],
            isApprove: false,
            // 图片详情页
            photoDetailVisible: false,
            // 图片id
            photoId: null,

        };
    },
    created() {
        this.getPhotosCategory('探索');
        this._getAllPhotos();
        // 改变标签高亮状态
        this.$store.commit('changeSelectState', 1);
    },
    mounted() {},
    methods: {
        handleClick(tab, event) {
            if (tab.index >= 1) {
                var cateId = this.imgcateBox[tab.index - 1].categoryId;
                imageApi.getPhotoByCate(cateId).then((res) => {
                    this.imgBox = res.data;
                });
            } else {
                this._getAllPhotos();
            }
        },
        _getAllPhotos() {
            imageApi.getAllPhotos().then((res) => {
                this.imgBox = res.data;
            });
        },
        getPhotosCategory(name) {
            imageApi.getImgBox(name).then((res) => {
                this.imgcateBox = res.data;
                // console.log(this.imgcateBox)
            });
        },
        _updateApprovalCountsById(photoId) {
            if(!window.sessionStorage.getItem('token')){
                this.$message.info('请先登录');
                return;
            }
            let data = {
                photoId: photoId,
            };
            imageApi.updateApprovalCountsById(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('点赞成功');
                    // 过滤器根据id更新点赞数
                    this.imgBox = this.imgBox.map((item) => {
                        if (item.photoId == photoId) {
                            item.approvalCounts = res.data;
                        }
                        return item;
                    });
                }else{
                    this.$message.error(res.msg);
                }
            });
        },
        load() {
            this.count += 6;
        },
        proxyImage: function (photoId) {
            // if(e.target.id==='approve'){
            this._updateApprovalCountsById(photoId);

            // }
        },
        // 图片详情跳转
        _toPhotoDetail(id) {
            this.photoDetailVisible = true;
            this.photoId = id;
        },
         // 前往个人详情页面
         _toDetail(id) {
            console.log(111);
            console.log(id);
            if (id === this.$store.state.userId) {
                this.$router.push('/personal');
                return;
            }
            this.$router.push({
                path: '/user/' + id,
            });
        },
    },
};
</script>

<style scoped>
/* 鼠标悬浮 */
.mouse_hover{
    cursor: pointer;
}
::v-deep .el-tabs__nav-scroll {
    height: 50px;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000;
    background-color: aliceblue;
}
.container {
    margin: 0;
    padding: 0;
}
.head {
    height: 10%;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.body {
    position: relative;

    width: 80%;
    left: 10%;

    top: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    overflow-y: hidden;
    overflow-x: hidden;
}
.box {
    margin-bottom: 15px;
    width: 389px;
    height: 321px;
}
/* .head .el-tabs_item{
  font-size: 18px!important;
  font-weight: 800!important;
}  */
.nickname {
    position: relative;
    left: 15%;

    bottom: 40px;
}
.hide {
    position: relative; /* 绝对定位 */
    bottom: 120px;
    left: 0;
    width: 100%;
    height: 60px;

    color: #ffffff;
    transition: 0.2s; /* css3动画过度效果 */
    /* visibility: hidden; */
}
.box:hover .hide {
    visibility: visible;
}
.h-content {
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.54);
    width: calc(100% - 16px);
    height: 100px;
}
.h-title {
    margin-top: 6px;
    font-size: 8px;
}
#commentIcon {
    position: relative;
    left: 80%;
    font-size: 20px;
    bottom: 87px;
}
.el-icon-approve {
    position: relative;
    width: 20px !important;
    height: 20px !important;
    bottom: 65px;
    left: 60%;
}
.approvalNum {
    position: absolute;
    top: 75px;
    left: 66%;
}
.commentNum {
    position: relative;
    bottom: 117px;
    left: 88%;
}
</style>